<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>一米拾光 首页</title>
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../style/index.css" rel="stylesheet">

</head>
<body>
<nav class="navbar navbar-default">
    <div class="navbar-header">
        <img src="../../image/logo.png" alt="">

        <button data-toggle="collapse" data-target="#closed" class="navbar-toggle">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

    </div>
    <ul id="closed" class="nav navbar-nav navbar-right">
        <li><a href="index.html"><span class="glyphicon glyphicon-home">&nbsp;首页</span></a></li>
        <li><a href="photographySkills.html"><span class="glyphicon glyphicon-fire">&nbsp;摄影技能</span></a></li>
        <li><a href="gallery.html"><span class="glyphicon glyphicon-list">&nbsp;作品展示</span></a></li>
        <li><a href="aboutUs.html"><span class="glyphicon glyphicon-upload">&nbsp;关于我们</span></a></li>
    </ul>
</nav>

<article id="carousel" class="carousel slide">

    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
    </ol>

    <article class="carousel-inner">
        <div class="item active">
            <img src="../../image/index/slide1.jpg" alt="">
            <div class="carousel-caption">
                <h3>第一张轮播图的标题</h3>
                <p>第二张轮播图的纤细介绍，这里给出50到100中的文字描述即可</p>
            </div>
        </div>

        <div class="item">
            <img src="../../image/index/slide2.jpg" alt="">
            <div class="carousel-caption">
                <h3>第二张轮播图的标题</h3>
                <p>第一张轮播图的纤细介绍，这里给出50到100中的文字描述即可</p>
            </div>
        </div>

        <div class="item">
            <img src="../../image/index/slide3.jpg" alt="">
            <div class="carousel-caption">
                <h3>第三张轮播图的标题</h3>
                <p>第三张轮播图的纤细介绍，这里给出50到100中的文字描述即可</p>
            </div>
        </div>

    </article>

    <a href="#carousel" class="left carousel-control" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a href="#carousel" class="right carousel-control" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</article>

<section class="body01 container text-center">
    <br/>
    <h4 class="text-info">| 一米拾光 一米朝阳 |</h4>
    <p class="text-muted">摄影爱好者的天堂之内，不会缺少发现美的眼睛。</p><br/>
</section>

<section class="body02 container">

    <article class="col-md-6">
        <div class="media-left">
            <img class="media-object thumbnail" src="../../image/index/p2-1.jpg">
        </div>
        <div class="media-body">
            <h3 class="media-heading text-primary">夜景专题</h3><br/>
            <p class="hidden-xs text-muted">在这里发现美丽的夜景</p>
            <p class="hidden-xs text-info">在这里发现美丽的夜景</p>
        </div>
    </article>

    <article class="col-md-6">
        <div class="media-body text-right">
            <h3 class="media-heading text-primary">人像专题</h3><br/>
            <p class="hidden-xs text-muted">在这里发现美丽的人像</p>
            <p class="hidden-xs text-info">在这里发现美丽的人像</p>
        </div>
        <div class="media-right">
            <img class="media-object thumbnail" src="../../image/index/p2-2.jpg">
        </div>
    </article>

    <article class="col-md-6">
        <div class="media-left">
            <img class="media-object thumbnail" src="../../image/index/p2-3.jpg">
        </div>
        <div class="media-body">
            <h3 class="media-heading text-primary">静物专题</h3><br/>
            <p class="hidden-xs text-muted">在这里发现美丽的静物</p>
            <p class="hidden-xs text-info">在这里发现美丽的静物</p>
        </div>
    </article>

    <article class="col-md-6">
        <div class="media-body text-right">
            <h3 class="media-heading text-primary">美食专题</h3><br/>
            <p class="hidden-xs text-muted">在这里发现美丽的美食</p>
            <p class="hidden-xs text-info">在这里发现美丽的美食</p>
        </div>
        <div class="media-right">
            <img class="media-object thumbnail" src="../../image/index/p2-4.jpg">
        </div>
    </article>
</section>

<section class="body03 container">
    <article class="row bg-info">
        <div class="col-md-6">
            <img class="img-thumbnail" src="../../image/index/p3-1.jpg">
        </div>
        <div class="col-md-6">
            <h3 class="text-primary text-center">图文标题1</h3>
            <p class="text-muted text-center">图文详细内容1</p>
        </div>
    </article>
    <br/>
    <article class="row bg-success">
        <div class="col-md-6"><img class="img-thumbnail" src="../../image/index/p3-2.jpg"></div>
        <div class="col-md-6">
            <h3 class="text-primary text-center">图文标题2</h3>
            <p class="text-muted text-center">图文详细内容2</p>
        </div>
    </article>
</section>
<br/>
<footer class="bg-warning text-center text-muted">
    <br>
    <p>摄影爱好者基地 | 合作事宜 | 版权投诉</p>
    <p class="text-uppercase">黑ICP 备1234567. 1964-2100 一米拾光网. Powered by Bootstrap.</p>
</footer>

<script src="../../jquery/jquery-3.2.1.min.js"></script>
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<script src="../script/index.js"></script>
</body>
</html>